<template>
    <!-- 对话框表单 -->
    <el-dialog class="ba-operate-dialog" :close-on-click-modal="false" :destroy-on-close="true"
        :model-value="['Add', 'Edit'].includes(baTable.form.operate!)" @close="baTable.toggleForm" width="1200px">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ baTable.form.operate ? (baTable.form.operate === 'Add' ? '添加' : '编辑') + '订单' : '' }}
            </div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'"
                :style="config.layout.shrink ? '' : 'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'">
                <el-form ref="formRef" @keyup.enter="baTable.onSubmit(formRef)" :model="baTable.form.items"
                    :label-position="config.layout.shrink ? 'top' : 'right'"
                    :label-width="baTable.form.labelWidth + 'px'" :rules="rules" v-if="!baTable.form.loading">
                    <!-- 订单号 -->
                    <el-form-item prop="order_no" label="订单号">
                        <el-input v-model="baTable.form.items!.order_no" type="string" placeholder="请输入订单号"
                            :disabled="baTable.form.operate === 'Edit'"></el-input>
                    </el-form-item>

                    <!-- 优惠价 -->
                    <el-form-item prop="discount_price" label="优惠价">
                        <el-input-number v-model="baTable.form.items!.discount_price" :min="0" :step="0.01"
                            :precision="2" placeholder="请输入优惠价"></el-input-number>
                    </el-form-item>

                    <!-- 总价 -->
                    <el-form-item prop="total_price" label="总价">
                        <el-input-number v-model="baTable.form.items!.total_price" :min="0" :step="0.01" :precision="2"
                            placeholder="请输入总价"></el-input-number>
                    </el-form-item>

                    <!-- 实付价 -->
                    <el-form-item prop="pay_price" label="实付价">
                        <el-input-number v-model="baTable.form.items!.pay_price" :min="0" :step="0.01" :precision="2"
                            placeholder="请输入实付价"></el-input-number>
                    </el-form-item>

                    <!-- 状态 -->
                    <el-form-item prop="status" label="状态">
                        <el-radio-group v-model="baTable.form.items!.status">
                            <el-radio :value="10" border>待支付</el-radio>
                            <el-radio :value="20" border>已取消</el-radio>
                            <el-radio :value="30" border>待发货</el-radio>
                            <el-radio :value="31" border>待收货</el-radio>
                            <el-radio :value="32" border>已完成</el-radio>
                            <el-radio :value="33" border>退货退款</el-radio>
                            <el-radio :value="34" border>退货中</el-radio>
                            <el-radio :value="35" border>售后完成</el-radio>
                            <el-radio :value="40" border>退款中</el-radio>
                            <el-radio :value="41" border>退款完成</el-radio>
                            <el-radio :value="42" border>拒绝退款</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <!-- 物流公司 -->
                    <el-form-item prop="wuliu_gs" label="物流公司">
                        <el-select v-model="baTable.form.items!.wuliu_gs" placeholder="请选择物流公司" :value-key="'value'">
                            <el-option v-for="item in expressList" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>

                    <!-- 物流单号 -->
                    <el-form-item prop="wuliu_no" label="物流单号">
                        <el-input v-model="baTable.form.items!.wuliu_no" type="string" placeholder="请输入物流单号"></el-input>
                    </el-form-item>

                    <!-- 用户名 -->
                    <el-form-item prop="user_name" label="用户名">
                        <el-input v-model="baTable.form.items!.user_name" type="string" placeholder="请输入用户名"></el-input>
                    </el-form-item>

                    <!-- 电话 -->
                    <el-form-item prop="user_mobile" label="电话">
                        <el-input v-model="baTable.form.items!.user_mobile" type="string"
                            placeholder="请输入电话号码"></el-input>
                    </el-form-item>

                    <!-- 用户地址 -->
                    <el-form-item prop="user_address" label="用户地址">
                        <el-input v-model="baTable.form.items!.user_address" type="textarea" :rows="3"
                            placeholder="请输入地址"></el-input>
                    </el-form-item>

                    <!-- 支付方式 -->
                    <el-form-item prop="pay_type" label="支付方式">
                        <el-input v-model="baTable.form.items!.pay_type" type="string" placeholder="请输入支付方式"></el-input>
                    </el-form-item>

                    <!-- 支付时间 -->
                    <el-form-item prop="pay_time" label="支付时间">
                        <el-date-picker v-model="baTable.form.items!.pay_time" type="datetime" placeholder="请选择支付时间"
                            value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
                    </el-form-item>
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.toggleForm('')">取消</el-button>
                <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)"
                    type="primary">
                    {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? '保存并编辑下一项' : '保存' }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, inject, useTemplateRef, onMounted, ref } from 'vue'
import type baTableClass from '/@/utils/baTable'
import type { FormItemRule } from 'element-plus'
import { buildValidatorData } from '/@/utils/validate'
import { useConfig } from '/@/stores/config'
import createAxios from '/@/utils/axios'

const config = useConfig()
const formRef = useTemplateRef('formRef')
const baTable = inject('baTable') as baTableClass
const expressList = ref<any[]>([])

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    order_no: [buildValidatorData({ name: 'required', title: '订单号' })],
    total_price: [buildValidatorData({ name: 'required', title: '总价' })],
    pay_price: [buildValidatorData({ name: 'required', title: '实付价' })],
    status: [buildValidatorData({ name: 'required', title: '状态' })],
    user_name: [buildValidatorData({ name: 'required', title: '用户名' })],
    user_mobile: [buildValidatorData({ name: 'required', title: '电话' })],
    user_address: [buildValidatorData({ name: 'required', title: '用户地址' })]
})

// 获取物流公司数据的方法
const fetchExpressList = async () => {
    try {
        console.log('开始获取物流公司数据...')
        const response = await createAxios({
            url: '/expressquery/getExpressList',
            method: 'get'
        })

        console.log('物流公司数据响应:', response)

        // 检查响应数据格式并构建选项
        // 响应格式: {code: 1, msg: "success", time: "1762507702", data: []}
        if (response && response.data && Array.isArray(response.data)) {
            // 优先使用id作为value，确保是数字类型以匹配后端返回的数据格式
            expressList.value = response.data.map((item: any) => ({
                label: item.name || '未知物流公司',
                value: Number(item.id) || String(item.id) // 转换为数字类型，同时提供字符串备选
            }))
            console.log('构建的物流公司选项数量:', expressList.value.length)
            console.log('前5个选项示例:', expressList.value.slice(0, 5))
        } else {
            console.error('物流公司数据格式不正确:', response)
            // 添加一些默认选项作为备用
            expressList.value = [
                { label: '顺丰', value: 'SF' },
                { label: '申通', value: 'STO' },
                { label: '韵达快运', value: 'YD' },
                { label: '天天快递', value: 'HHTT' },
                { label: '圆通速递', value: 'YTO' }
            ]
        }
    } catch (error) {
        console.error('获取物流公司数据失败:', error)
        // 错误情况下添加默认选项
        expressList.value = [
            { label: '顺丰', value: 'SF' },
            { label: '申通', value: 'STO' },
            { label: '韵达快运', value: 'YD' },
            { label: '天天快递', value: 'HHTT' },
            { label: '圆通速递', value: 'YTO' }
        ]
    }
}

// 组件挂载时获取物流公司数据
onMounted(() => {
    fetchExpressList()
})
</script>

<style scoped lang="scss">
.el-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.el-radio {
    margin-right: 10px;
    margin-bottom: 10px;
}
</style>
